<template>
  <div class="video-box" v-if="showVideo">
    <img 
      src="../../assets/images/index/close_circle.png" 
      alt="" 
      width="44" 
      height="44"
      class="close-img"
      @click="hide"
    >
    <div class="flex-center">
      <video
          class="myVideo"
          :autoplay="true"
          controls
          width="375"
          height="667"
      >
        <source
          :src="videoSrc"
          type="video/mp4"
        >
      </video>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    videoSrc: {
      type: String
    }
  },
  data () {
    return {
      showVideo: false,
    }
  },
  methods: {
    show () {
      this.showVideo = true
    },
    hide () {
      this.showVideo = false
    }
  }
}
</script>
<style lang="less" scoped>
.video-box{
  width:100%;
  height:100%;
  padding-top:120px;
  position: fixed;
  top:0;
  left:0;
  z-index:50;
  background: rgba(0,0,0,.4);
  .myVideo{
    // width:40%;
  }
  .close-img{
    position: absolute;
    top:100px;
    right:250px;
  }
}
</style>

